<template>
    <div>
        <h2>基本信息</h2>
        <table class="table table-bordered">
            <tr>
                <td>*房间名称</td>
                <td>
                    <input type="text" v-model="quinfo.name" maxlength="20">0/20
                </td>
            </tr>
            <tr>
                <td>*门市价</td>
                <td>
                    <input type="text" v-model="quinfo.price">元
                </td>
            </tr>
            <tr>
                <td>押金</td>
                <td>
                    <input type="radio" value="不需要" v-model="quinfo.ya">不需要
                    <input type="radio" value="需要" v-model="quinfo.ya">需要
                </td>
            </tr>
            <tr>
                <td>房型面积</td>
                <td>
                    <input type="text" v-model="quinfo.mian">
                </td>
            </tr>
            <tr>
                <td>*可住人数</td>
                <td>
                    <input type="text" v-model="quinfo.ren">人
                </td>
            </tr>
            <tr>
                <td>可否加床</td>
                <td>
                    <input type="radio" value="不可加床" v-model="quinfo.jia">不可加床
                    <input type="radio" value="免费加床" v-model="quinfo.jia">免费加床
                    <input type="radio" value="收费加床" v-model="quinfo.jia">收费加床
                    <input type="radio" value="自定义" v-model="quinfo.jia">自定义
                </td>
            </tr>
            <hr>
            <h2>展示信息</h2>
            <tr>
             <td>房型图片</td>
             <td>
                <input type="file" @change="img">
                <img
              v-if="quinfo.img != ''"
              :src="quinfo.img"
              width="60"
              height="60"
              alt=""
            />
             </td>
            </tr>
    
            <tr>
                <td>房型展示</td>
                <td>
                    <textarea v-model="quinfo.jie">
                        
                    </textarea>
                </td>
            </tr>
            <tr>
                <input type="button"  value="取消" @click="qu">
                <input type="button" value="确认" @click="add">
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
import {useRoute,useRouter} from 'vue-router'
import axios from 'axios'
let router=useRouter();
let data:any=reactive({});
let quinfo=reactive({
  "name": "",
  "price": 0,
  "ya": "",
  "mian": 0,
  "ren": 0,
  "jia": "",
  "img": "",
  "vr": "p1.jpg",
  "jie": "",
});
const add=()=>{
    axios({
        url:'https://localhost:7098/api/FangXing/AddFang',
        method:'post',
        data:quinfo
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert("添加成功!");
            router.push("/fangxshow")
        }
        else{
            alert("添加失败!");
        }
    })
    .catch((err)=>{
        console.log(err);
    })
};
const qu=()=>{
    quinfo.name="";
    quinfo.price=0;
    quinfo.ya="";
    quinfo.mian=0;
    quinfo.ren=0;
    quinfo.jia="";
    quinfo.img="";
    quinfo.jie="";
}
const img=(e:any)=>{
    console.log(e);
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'https://localhost:7098/api/FangXing/Img',
        method:'post',
        data:f,
    })
    .then((res)=>{
        console.log(res);
        if(res.data=='不是图片'){
            alert("上传的不是图片!");
            return;
        }
        if(res.data=='大于2M'){
            alert("不能大于2m");
            return;
        }
        quinfo.img=res.data;

    })
    .catch((err)=>{
        console.log(err);
    })
}
const img1=(e:any)=>{
    console.log(e);
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'https://localhost:7098/api/FangXing/Img',
        method:'post',
        data:f,
    })
    .then((res)=>{
        console.log(res);
        if(res.data=='不是图片'){
            alert("上传的不是图片!");
            return;
        }
        if(res.data=='大于2M'){
            alert("不能大于2m");
            return;
        }
        quinfo.vr=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>